<template>
  <div
    class="el-tree-node"
    @click.stop="handleClick"
    @contextmenu="($event) => this.handleContextMenu($event)"
    v-show="source.visible"
    :class="{
      'is-expanded': expanded,
      'is-current': source.isCurrent,
      'is-hidden': !source.visible,
      'is-focusable': !source.disabled,
      'is-checked': !source.disabled && source.checked,
      parent_tag: source.data.isGroup,
      child_tags: !source.data.isGroup,
    }"
    role="treeitem"
    tabindex="-1"
    :aria-expanded="expanded"
    :aria-disabled="source.disabled"
    :aria-checked="source.checked"
    ref="node"
  >
    <div class="el-tree-node__content">
      <span
        aria-hidden="true"
        :style="{ width: (source.level - 1) * (tree.indent + 8) + 'px' }"
      ></span>
      <div
        class="nodeContent"
        :class="{ selectedColor: tree.currentSelect == source.data.key }"
      >
        <span
          v-if="source.data.isGroup"
          @click.stop="handleExpandIconClick"
          :class="[
            {
              'is-leaf': !source.data.isGroup,
              expanded: source.data.isGroup && expanded,
            },
            'el-tree-node__expand-icon',
            tree.iconClass ? tree.iconClass : 'el-icon-caret-right',
          ]"
        ></span>

        <el-checkbox
          v-if="showCheckbox"
          v-model="source.checked"
          :indeterminate="source.indeterminate"
          :disabled="!!source.disabled"
          @click.native.stop
          @change="handleCheckChange"
        ></el-checkbox>
        <i class="iconfont icondian" :class="getClass(source.data.status)"></i>

        <span
          v-if="source.loading"
          class="el-tree-node__loading-icon el-icon-loading"
        ></span>
        <node-content :node="source"></node-content>
        <span class="equipNumber" v-if="source.data.isGroup">
          {{ source.data.count }}
        </span>
      </div>
    </div>
  </div>
</template>

<script type="text/jsx">
import ElCheckbox from 'element-ui/packages/checkbox';
import emitter from 'element-ui/src/mixins/emitter';
import mixinNode from './mixin/node';
import { getNodeKey } from './model/util';

export default {
  name: 'ElTreeVirtualNode',
  componentName: 'ElTreeVirtualNode',

  mixins: [emitter, mixinNode],

  props: {
    source: {
      default() {
        return {};
      }
    },
    renderContent: Function,
    showCheckbox: {
      type: Boolean,
      default: false
    }
  },

  components: {
    ElCheckbox,
    NodeContent: {
      props: {
        node: {
          required: true
        }
      },
      render(h) {
        const parent = this.$parent;
        const tree = parent.tree;
        const node = this.node;
        const { data, store } = node;
        return (
          parent.renderContent
            ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
            : tree.$scopedSlots.default
              ? tree.$scopedSlots.default({ node, data })
              : <span class="el-tree-node__label">{ node.label }</span>
        );
      }
    }
  },
  computed:{
      getClass () {
          return function (state) {
              let className;
              switch (state) {
                  case 0:
                      className = 'NoCommunication';
                      break;
                  case 1:
                      className = 'CommunicationOK';
                      break;
                  case 2:
                      className = 'HaveAlarm';
                      break;
                  case 3:
                      className = 'HaveSetParm';
                      break;
                  case 4:
                      className = 'initial';
                      break;
                  case 5:
                      className = 'CheFang';
                      break;
                  case 6:
                      className = 'BackUp';
                      break;
                  default:
                      className = 'CommunicationOK';
                      break;
              }
              return className;
          };
      },
  },
  data() {
    return {
      tree: null,
      expanded: false,
      childNodeRendered: false,
      oldChecked: null,
      oldIndeterminate: null
    };
  },

  watch: {
    'source.indeterminate'(val) {
      this.handleSelectChange(this.source.checked, val);
    },

    'source.checked'(val) {
      this.handleSelectChange(val, this.source.indeterminate);
    },

    'source.expanded'(val) {
      this.$nextTick(() => this.expanded = val);
      if (val) {
        this.childNodeRendered = true;
      }
    }
  },

  created() {
    const parent = this.$parent.$parent.$parent;
    this.creator(parent, 'source');
  }
};
</script>
